<template>
  <el-dialog
    :title="!dataForm.brandId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="品牌名" prop="name" label-width="100px">
      <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
    </el-form-item>
    <el-form-item label="显示状态" prop="showStatus" label-width="100px">
      <el-switch
        v-model="dataForm.showStatus"
        :active-value=1
        :inactive-value=0
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用"
        inactive-text="禁用">
      </el-switch>
    </el-form-item>
    <el-form-item label="检索首字母" prop="firstLetter" label-width="100px">
      <el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input>
    </el-form-item>
    <el-form-item label="排序" prop="sort" label-width="100px">
      <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="descript" label-width="100px">
      <el-input v-model="dataForm.descript" placeholder="品牌介绍"></el-input>
    </el-form-item>
    <el-form-item label="LOGO" prop="logo" label-width="100px">
      <img :src="dataForm.logo" alt="" class="headimag">
      <OssUpload v-model="dataForm.logo" ref="Ossupload"></OssUpload>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import OssUpload from "../../upload/OssUpload"
  export default {
    data () {
      return {
        visible: false,
        // 当前弹框类型
        dialogTitle:"",
        dataForm: {
          brandId: 0,
          name: '',
          showStatus: '', 
          firstLetter: '',
          sort: '',
          logo:'',
          descript:'',
        },
        dataRule: {
          name: [
            { required: true, message: '品牌名不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    components:{OssUpload},
    methods: {
      init (id,data) {
        this.dataForm = {}
        this.dataForm.brandId =  id || 0
        this.dialogTitle = this.dataForm.brandId ? "修改": "新增" 
        if(this.dataForm.brandId){   
          this.dataForm =  data   
        }
        // console.log("1111",data)
        this.visible = true
        },
        // 弹框取消
        cancelDialog(){
        //  console.log(this) 
         this.$refs.Ossupload.$refs.upload.clearFiles()
         this.visible = false
        },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate( async (valid) => {
          if (valid) {
            // console.log(this.dataForm)
            if(this.dialogTitle === "新增")
            {
               const {data:res} = await this.$http.post("/xuanmall/brand/save",this.dataForm)
               if(res.msg === 'success'){
                this.$message.success("新增品牌成功")
                this.$emit('updatedata');
              }
              else{
                this.$message.error("新增品牌失败")
              } 
            }
            else{
              const {data:res} = await this.$http.post("/xuanmall/brand/update",this.dataForm)
              // console.log(res)
              if(res.msg === 'success'){
                this.$message.success("修改品牌成功")
                this.$emit('updatedata');
                 console.log(this.dataForm)
              }
              else{
                this.$message.error("修改品牌失败")
              } 
             
            }
            this.visible = false;
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>

.headimag{
  height: 70px;
  width: 90px;
}
</style>
